<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>姓名:<input type="text"  value="哈哈"></p>
    <p></p>
    <p>年龄:<input type="text"  value="23"></p>
    
    <p>电话:<input type="text"  value="12345678"></p>
    <p>地址:<input type="text"  value="河南"></p>
    <button>确认</button>
</body>
<script>
    var body=document.getElementsByTagName("body")[0]
    var three=document.getElementsByTagName("p")[1]
    var arr=body.childNodes
    var sex=document.createElement("p");
    var input=document.createElement("input");
    input.setAttribute("value","男")
    input.setAttribute("type","text")
    sex.append("性别:",input)
    body.replaceChild(sex,three)
    for(let i=0; i<body.childNodes.length;i++){
            console.log("第"+(i+1)+"节点是："+arr[i].nodeName)
    }

    var dd=[];
    var p=document.getElementsByTagName("p");

    for(let i=0;i<p.length;i++){
        dd[i]=p[i].getElementsByTagName("input")[0].value;
        console.log(dd[i])
    }
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick=function(){
        alert("姓名:"+dd[0]+"性别："+dd[1]+"年龄："+dd[2]+"电话:"+dd[3]+"地址:"+dd[4])
    }
   var aa=document.getElementsByTagName("p")[4];
    aa.getElementsByTagName("input")[0].style.height="100px"
    aa.getElementsByTagName("input")[0].style.width="300px"
    aa.getElementsByTagName("input")[0].style.border="2px solid red"
</script>
</html>